import React from 'react';
import { Empty } from 'antd';
import { Radar } from '@ant-design/plots';
import { ProjectOverviewRadarDataType, RadarDataKind } from '@/types/dashboard';

type RadarDataType = {
  group: string;
  kind: string;
  value: number;
}

type KindType = Record<RadarDataKind, string>;

const kindCnName: KindType = {
  'cqTasks': '需求任务',
  'tradeTasks': '交易任务',
};

interface ProjectOverviewRadarCardProps {
  loading: boolean;
  radarDatas: ProjectOverviewRadarDataType;
}

/**
 * 项目最近一次投产各集群需求数量与交易任务数量雷达图
 */
const ProjectOverviewRadarCard: React.FC<ProjectOverviewRadarCardProps> = (props) => {
  const { radarDatas } = props;
  const { data } = radarDatas;
  let newData: RadarDataType[] = [];
  let max = 0;
  data.map((item) => {
    const { kind, group, value } = item;
    const newItem: RadarDataType = {
      group,
      kind: kindCnName[kind],
      value
    }
    newData.push(newItem);
    if (value > max) {
      max = value;
    }
  });
  if (max < 5) {
    max = 5;
  }
  let tickCount = max / 5;
  const config = {
    height: 380,
    data: newData,
    xField: 'group',
    yField: 'value',
    colorField: 'kind',
    // shapeField: 'smooth',// smooth 没有参数就是折线，有参数且是smooth就是光滑的
    area: {
      style: {
        fillOpacity: 0.5,
      },
    },
    scale: { x: { padding: 0.5, align: 0 }, y: { tickCount: tickCount, domainMax: max } },
    axis: { x: { grid: true }, y: { zIndex: 1, title: false } },
    style: {
      lineWidth: 2,
    },
  };
  return (
    <>
      {radarDatas && radarDatas.data.length > 0 ? 
        <Radar {...config} />
        : <Empty/>
      }
    </>
  );
};

export default ProjectOverviewRadarCard;